<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>天猫购物车</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style type="text/css">
			*{padding:0;margin:0;}
			@font-face {font-family: 'iconfont';
			    src: url('font/iconfont.eot'); /* IE9*/
			    src: url('font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
			    url('font/iconfont.woff') format('woff'), /* chrome、firefox */
			    url('font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
			    url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
				}
			.iconfont{
			    font-family:"iconfont" !important;
			    font-size:20px;font-style:normal;
			    -webkit-font-smoothing: antialiased;
			    -webkit-text-stroke-width: 0.2px;
			    -moz-osx-font-smoothing: grayscale;}
			
			#fix_block div .icon iconfont{font-size:30px;
					text-align:center;
					line-height:35px;}
			#fix_block div b{font-weight:100;}
			#fixed{
					width:315px;
					height:100%;
					position: fixed;
					right:-280px;
					top:0;
					background:red;
					z-index:1;
					}
			#fix_block{
					width:35px;
					height:100%;
					background:#000;
					float:left;
					}
			#fix_block div{cursor: pointer;}
			#fix_none{
					width:280px;
					height:100%;
					background:yellow;
					float:left;
					position:absolute;
					left:35px;
					overflow:hidden;
					}
			#wang{
				position: absolute;
				width:35px;
				height:35px;
				left:0px;
				top:170px;
				cursor: pointer;
			}
			#wang img{
				width:26px;
				height:26px;
				border-radius:26px;
				position: absolute;
				left:4px;
				top:4px;
				}
			#wang span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:70px;
				background:#999;
				font-size:12px;
				opacity: 0;
				display: none;
				color:#fff;
			}
			
			#car{
				width:35px;
				height:135px;
				position: absolute;
				left:0;
				top:210px;
				border-top:1px solid #eee;
				border-bottom:1px solid #eee;
				text-align:center;
				line-height:35px;
				color:#fff;	
			}
			#car b{font-weight:100;}
			#car i{
				float:left;
				width:35px;
				font-style: normal;
				font-size:14px;
				height:20px;
			}
			#money{
				width:35px;
				height:35px;
				font-size:26px;
				position: absolute;
				top:346px;
				left:auto;
				color:#fff;
				line-height:35px;
				margin-top:0px;
			}
			#money b{
				width:35px;
				height:35px;
				font-weight:100;
				display: block;
				text-align:center;
				cursor: pointer;}
			#money span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:70px;
				background:#999;
				font-size:12px;
				opacity: 0;
				top:0;
				color:#fff;}
			#follow{
				width:35px;
				height:35px;
				font-size:26px;
				position: absolute;
				top:381px;
				left:auto;
				color:#fff;
				line-height:35px;
				margin-top:0px;
			}
			#follow b{
				width:35px;
				height:35px;
				font-weight:100;
				display: block;
				text-align:center;
				cursor: pointer;}
			#follow span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:70px;
				background:#999;
				font-size:12px;
				opacity: 0;
				top:0;
				color:#fff;}
			#collect{
				width:35px;
				height:35px;
				font-size:26px;
				position: absolute;
				top:416px;
				left:auto;
				color:#fff;
				line-height:35px;
				margin-top:0px;
			}
			#collect b{
				width:35px;
				height:35px;
				font-weight:100;
				display: block;
				text-align:center;
				cursor: pointer;}
			#collect span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:70px;
				background:#999;
				font-size:12px;
				opacity: 0;
				top:0;
				color:#fff;}
			#see{
				width:35px;
				height:35px;
				font-size:26px;
				position: absolute;
				top:451px;
				left:auto;
				color:#fff;
				line-height:35px;
				margin-top:0px;
			}
			#see b{
				width:35px;
				height:35px;
				font-weight:100;
				display: block;
				text-align:center;
				cursor: pointer;}
			#see span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:70px;
				background:#999;
				font-size:12px;
				opacity: 0;
				top:0;
				color:#fff;}
			#recharge{
				width:35px;
				height:35px;
				font-size:26px;
				position: absolute;
				top:486px;
				left:auto;
				color:#fff;
				line-height:35px;
				margin-top:0px;
			}
			#recharge b{
				width:35px;
				height:35px;
				font-weight:100;
				display: block;
				text-align:center;
				cursor: pointer;}
			#recharge span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:70px;
				background:#999;
				font-size:12px;
				opacity: 0;
				top:0;
				color:#fff;}
			#user{
				width:35px;
				height:35px;
				font-size:26px;
				position: absolute;
				top:580px;
				left:auto;
				color:#fff;
				line-height:35px;
				margin-top:0px;
			}
			#user b{
				width:35px;
				height:35px;
				font-weight:100;
				display: block;
				text-align:center;
				cursor: pointer;}
			#user span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:70px;
				background:#999;
				font-size:12px;
				opacity: 0;
				top:0;
				color:#fff;}
			#erwei{
				width:35px;
				height:35px;
				font-size:26px;
				position: absolute;
				top:615px;
				left:auto;
				color:#fff;
				line-height:35px;
				margin-top:0px;
			}
			#erwei b{
				width:35px;
				height:35px;
				font-weight:100;
				display: block;
				text-align:center;
				cursor: pointer;}
			#erwei span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:175px;
				
				font-size:12px;
				opacity: 0;
				top:-135px;
				color:#fff;}
			#top{
				width:35px;
				height:35px;
				font-size:26px;
				position: absolute;
				top:650px;
				left:auto;
				color:#fff;
				line-height:35px;
				margin-top:0px;
			}
			#top b{
				width:35px;
				height:35px;
				font-weight:100;
				display: block;
				text-align:center;
				cursor: pointer;}
			#top span{
				width:90px;
				height:35px;
				text-align:center;
				line-height:35px;
				position: absolute;
				right:70px;
				background:#999;
				font-size:12px;
				opacity: 0;
				top:0;
				color:#fff;}
		
			.right{
				width:280px;
				height:100%;
				background:#999;
				}
			.right span{
				float:left;
			}
			.right b{
				float:right;
			}
		
		</style>
		<script src="jQuery.js"></script>
		<script src="js/index.js"></script>
		<script>
			(function($){
				$(function(){
					var k=true;
					$('#fix_block div').mouseover(function(){
						var index=$(this).index();
						$('#fix_block div').css({'background-color':'#000'});
						$('#fix_block div').eq(index).css({'background-color':'#c40000'});
						$('#fix_block div span').css({display:'none'});
						$('#fix_block div span').eq(index).css({display:'block'});
						$('#fix_block div span').eq(index).stop(true).animate({right:'35px',opacity:1});
						if(index=8){
							$('#fix_block div span').eq(index).stop(true).animate({right:'120px',opacity:1});
						}
					});
					$('#fix_block div').mouseout(function(){
						$('span').css({display:'none'})
						$('#wang').css({'background-color':'#000'});
						$('span').stop().animate({right:'70px',opacity:0});
					});
					$('#wang span').mouseover(function(){
						$('span').css({display:'block'});
					});
					$('#wang span').mouseout(function(){
						$('span').css({display:'none'});
						$('#wang').css({'background-color':'#000'});
						$('span').stop().animate({right:'70px',opacity:0});
					});
					$('#fix_block div').slice(0,7).click(function(){
						var i=$(this).index();
						if($('#fix_none .right').eq(i).css("display")=="block"&&$('#fixed').css("right")=="0px"){
							$('#fixed').stop(true).animate({right:'-280'},1000);
						}else{
							$('#fixed').stop(true).animate({right:'0'},1000);
							$('#fix_none .right').css({display:'none'}).eq(i).css({display:'block'});	
						}
						
					});
					
					$('#top').click(function(){
						$(window).scrollTop(0);
					})
				});
						
			})(jQuery);
		</script>
	</head>
	<body>
		<div id="fixed">
			<div id="fix_block">
				<div id="wang">
					<img src="images/wang.jpg" />
					<span>我的特权</span>
				</div>
				<div id="car">
					<b class="icon iconfont">&#x3475;</b>
					<i>购</i><i>物</i><i>车</i>(0)
					<span></span>
				</div>
				<div id="money">
					<b class="icon iconfont">&#xf0191;</b>
					<span>我的资产</span>
				</div>
				<div id="follow">
					<b class="icon iconfont">&#xf0054;</b>
					<span>我关注的品牌</span>
				</div>
				<div id="collect">
					<b class="icon iconfont">&#xe650;</b>
					<span>我的收藏</span>
				</div>
				<div id="see">
					<b class="icon iconfont">&#xf00f9;</b>
					<span>我看过的</span>
				</div>
				<div id="recharge">
					<b class="icon iconfont">&#xe626;</b>
					<span>我要充值</span>
				</div>
				<div id="user">
					<b class="icon iconfont">&#xe609;</b>
					<span>用户反馈g</span>
				</div>
				<div id="erwei">
					<b class="icon iconfont">&#xf010a;</b>
					<span><img src="images/erweima.png"/></span>
				</div>
				<div id="top">
					<b class="icon iconfont">&#xe6f7;</b>
					<span>返回顶部</span>
				</div>	
			</div>
			
			<div id="fix_none">
				<div class="right">
					<div><span>>></span><b>我的特权</b></div>
				</div>
				<div class="right">
					<div><span>>></span><b>我的购物车</b></div>
				</div>
				<div class="right">
					<div><span>>></span><b>我的资产</b></div>
				</div>
				<div class="right">
					<div><span>>></span><b>我关注的品牌</b></div>
				</div>
				<div class="right">
					<div><span>>></span><b>我的收藏</b></div>
				</div>
				<div class="right">
					<div><span>>></span><b>我看过的</b></div>
				</div>
				<div class="right">
					<div><span>>></span><b>我要充值</b></div>
				</div>
			</div>
		</div>
		
		<!----------------------------------------------吸顶搜索框--------------------------------------->
		<div id="nav_header-wrap">
			<div id="nav_header">
				<div class="nav">&#xe623;</div>
				<div id="search">
					<form>
						<input class="txt" type="text" placeholder="清新小短裤 " value=""/>
						<!--<label>清新小短裤</label>-->
						<ul id="search_message">
							
						</ul>
						<input class="btn" type="button" value="搜索" />
					</form>
				</div>
			</div>
		</div>
		
		<!----------------------------------------------左边的阶梯导航--------------------------------------->
		<div id="nav_left">
			<div id="box1" class="cor">
				导航
			</div>
			<div id="box1" class="cor1">
				<div id="box2">亲子时光</div>	
			</div>
			<div id="box1" class="cor2">
				<div id="box2">户外出行</div>	
			</div>
			<div id="box1" class="cor3">
				<div id="box2">打造爱巢</div>	
			</div>
			<div id="box1" class="cor4">
				<div id="box2">居家生活</div>	
			</div>
			<div id="box1" class="cor5">
				<div id="box2">潮电酷潮</div>	
			</div>
			<div id="box1" class="cor6">
				<div id="box2">美丽人生</div>	
			</div>
			<div id="box1" class="cor7">
				<div id="box2">品牌期间</div>	
			</div>
			<div id="box1" class="cor8">
				<div id="box2">猜你喜欢</div>	
			</div>
			<div id="box1">
				<i class="iconfont">&#xe6f7;</i>
				<span>顶部</span>
			</div>
		</div>
		
		
		
		
		<!----------------------------------------------主要内容--------------------------------------->
		<div id="ding"></div>
		<div class="banner">bannerPic</div>
		<div class="banner">bannerPic</div>
		<div class="banner">bannerPic</div>
		<div class="box1" id='nav_nav' style="background:red;">导航</div>
		<div class="box1" style="background:yellow;">亲子时光</div>
		<div class="box1" style="background:green;">户外出行</div>
		<div class="box1" style="background:blue;">打造爱巢</div>
		<div class="box1" style="background:#008000;">居家生活</div>
		<div class="box1" style="background:#454545;">潮电酷潮</div>
		<div class="box1" style="background:#00FF00;">美丽人生</div>
		<div class="box1" style="background:yellow;">品牌期间</div>
		<div class="box1" style="background:red;">猜你喜欢</div>
		<div class="box1" style="background:pink;"><span>顶部</span></div>
		
		
		
		
		
	</body>
</html>
